@charset "utf-8";
//导航栏的背景颜色
.navbar-default{
    background-color: #222222;
    margin-bottom: 0;
    border:none;
    border-radius: 0;
    .container-fluid{
        max-width:1000px;
        .navbar-header{
            .navbar-brand{
                padding-top:7px; 
            }
        }
        #navbar{
            .navbar-nav{
                .dropBtn{
                    &:link{
                        background-color:#080808;
                        color:#fff;
                    }
                }
            }
           
        }
    } 
}
//导航栏的a标签颜色
.navbar-default .navbar-nav > li > a{
    color:#858585;
}
//导航激活类的样式
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:hover{
    background-color: #080808;
    color:#fff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav >li > a:focus{
    color:#fff;
}
.navbar-default .navbar-nav #dropBtn{
    background-color: #fff;
    color:#222222;
}
.navbar-default .navbar-nav .open a:focus{
    background-color: #080808;
    color:#fff;
}
.navbar-default .navbar-toggle{
    border-color:transparent;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
    background-color: #080808;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
    border-color:transparent;
}
//logo位置
.navbar-brand{
    padding-top:0;
    padding-bottom: 0;
}
//game_hot
.section_hot{
    .hot{
        max-width:1000px;
        .hot_img{
            .img_images{
                padding-left:0;
                padding-right:0;
                .images{
                    margin-top:-58px;
                    margin-left:-15px;
                }
            }
         
        }
        .hot_text{
            h2{
                text-align: right;
            }
            p{
                text-align: right;
                line-height:30px;
                color:#666;
                font-size:12px;
            }
            .hot_image{
                img{
                    width:100%;
                    margin-bottom:30px;
                    border-radius: 5px;
                    &:hover{
                            opacity: 0.6;
                        }
                }
            }
        }
    }
}
//上吧公主
.section_hot{
    margin-top:30px;
    .hot{
        .hot_text{
            h2{
                text-align: left;
            }
            p{
                text-align: left;
            }
        }
        .hot_img{
            .img_images{
                .images{
                    margin-top:20px;
                    margin-right:-20px;
                }
            }
        }
    }
}
//更多案例
.example_section{
    .example{
        max-width:1000px;
        padding-left:0;
        padding-right:0;
        h2{
            margin-top:60px;
            margin-bottom:30px;
        }
        .example_img{
            overflow: hidden;
            margin-left:0;
            margin-right:0;
            
            img{
                width:100%;
               
                border-radius: 5px;
            }
            p{
                text-align: center;
                line-height:25px;
                margin-bottom:20px;
            }
            .example_e{
                position: relative;
                overflow: hidden;
                .black{
                    width:303px;
                    height:133px;
                    position: absolute;
                    top:0;
                    left:-299px;
                    background-color: black;
                    opacity: 0.5;
                    z-index:2;
                    transition:all 1s;
                    margin-right:15px;
                }
                .example{
                   width:303px;
                   height:133px;
                   position: absolute;
                   top:0;
                   left:-299px;
                   z-index:3;
                   padding:10px;
                   transition:all 1s;
                   p{
                       font-size:12px;
                       color:#fff;
                   }
                }
                &:hover img{
                    opacity: 0.7;
                }
                &:hover .example,&:hover .black{
                    transform: translateX(303px);
                    
                }
                
            }
            .example_r{
                .black{
                    left:303px;
                    top:0;
                }
                .example{
                    left:303px;
                    top:0;
                }
                &:hover img{
                    opacity: 0.7;
                }
                &:hover .example,&:hover .black{
                    transform: translateX(-303px);
                    
                }
                
            }
            .example_t{
                .black{
                    left:0;
                    top:-133px;
                }
                .example{
                    left:0;
                    top:-133px;
                }
                &:hover img{
                    opacity: 0.7;
                }
                &:hover .example,&:hover .black{
                    transform: translateY(133px);
                    
                }
                
            }
            .example_b{
                .black{
                    left:0;
                    top:133px;
                }
                .example{
                    left:0;
                    top:133px;
                }
                &:hover img{
                    opacity: 0.7;
                }
                &:hover .example,&:hover .black{
                    transform: translateY(-133px);
                    
                }
                
            }
        }
    }
}
//脚部样式
footer{
    background-color: #3b3b3b;
    .footer{
        max-width:1000px;
        .footer_text{
           a{
               margin-top:30px;
               display: inline-block;
               line-height: 26px;
               padding-right:10px;
               color:#a1a3ab;
               &:hover{
                   color:#fff;
                   text-decoration: none;
               }
           }
            p{
                color:#a1a3ab;
            }
        }
        .footer_img{
            margin-top:30px;
            text-align: right;
            a{
                padding-left:10px;
                position: relative;
                .img{
                    display: none;
                    position: absolute;
                    top:-160px;
                    left:-40px;
                    z-index:999;
                }
                &:hover .img{
                    display: block;
                }
            }
        }
    }
}
@media screen and (max-width:480px){
    //game_hot
    .section_hot{
        .hot{
            .hot_img{
                padding-left:15px;
                .images{
                    display: none;
                }
            }
        }
    }
    .hot_section{
        .hot{
            .hot_img{
                .img_images{
                    display: none;
                }
            }
        }
    }
    //脚部样式
      footer{
        .footer{
            .footer_img{
                a{
                   display: none;
                }
            }
        }
    }
}
@media screen and (min-width:480px) and (max-width:767px){
     //game_hot
     .section_hot{
        .hot{
            .hot_img{
                padding-left:15px;
                .images{
                    display: none;
                }
            }
        }
    }
    //更多案例
    .example_section{
        .example{
            .example_img{
                .example_e,.example_r,.example_t,.example_b{
                    .black{
                        display:none;
                    }
                    .example{
                        display:none;
                    }
                }
            }
        }
    }
      //脚部样式
      footer{
        background-color: #3b3b3b;
        overflow: hidden;
        .footer{
           .footer_img{
               padding-right:20px;
               padding-bottom:20px;
           }
        }
    }

}
@media screen and (min-width:768px) and (max-width:991px){
      //更多案例
      .example_section{
        .example{
            .example_img{
                .example_e,.example_r,.example_t,.example_b{
                    .black{
                        display:none;
                    }
                    .example{
                        display:none;
                    }
                    &:hover{
                        img{
                            opacity: 0.7;
                        }
                    }
                }
            }
        }
    }
      //脚部样式
      footer{
        background-color: #3b3b3b;
        overflow: hidden;
        .footer{
           .footer_img{
               padding-right:20px;
               padding-bottom:20px;
           }
        }
    }
}
